<template>
  <div class="picture-perview">
    <el-upload
      action="#"
      list-type="picture-card"
      :on-remove="handleRemove"
      :auto-upload="false"
      multiple
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <div class="margin-top-2">
      <van-uploader v-model="fileList" multiple />
    </div>
  </div>
</template>

<script>
export default {
  name: "picturePreview",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      fileList: [
        { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
      ],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.picture-perview {
  width: 100%;
  height: 100%;
  padding: 100px 30px 120px 30px;
  box-sizing: border-box;
}

/* .picture-perview>>>.van-uploader__preview-image {
    width: 4rem;
    height: 4rem;
}
.picture-perview>>>.van-uploader__preview-delete {
    width: 0.5rem;
    height: 0.5rem;
}
.picture-perview>>>.van-uploader__preview-delete-icon {
    font-size: 0.5rem;
}
.picture-perview>>>.van-uploader__upload {
    width: 4rem;
    height: 4rem;
}
.picture-perview>>>.van-uploader__upload-icon {
    color: #dcdee0;
    font-size: 1.64rem;
} */
</style>